<!DOCTYPE html>
<html lang="en">
<head>
    <!-- https://blog.csdn.net/qq_32532841/article/details/105859870 -->
    <meta charset="UTF-8">
    <title>数据结果图</title>
    <!--echarts依赖js-->
    <script type="text/javascript" src="../js/echarts.min.js"></script>
    <!--地图显示依赖js-->
    <script type="text/javascript" src="../js/china.js"></script>
    <!--jquery-->
    <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <style>
        body, html {
            width: 100%;
            height: 100%;
        }

        .map {
            width: 100%;
            height: 100%;
            margin-top: -8%;
        }

        #china_map {
            width: 70%;
            height: 90%;
            margin-top: 150px;
            margin-left: 10px;
            border: 1px solid #ddd;
        }

        #city_map {
            width: 70%;
            height: 90%;
            margin-top: 150px;
            margin-left: 10px;
            border: 1px solid #ddd;
            display: none;
        }

    </style>
</head>
<body>
    <div class="map">
        <div id="china_map"></div>
        <div id="city_map"></div>
    </div>
</body>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript">
    function goBackChinaMap() {
        $('#china_map').css('display', 'block');
        $('#city_map').css('display', 'none');
    }

    $(function () {
        document.oncontextmenu = function (e) {
            e.preventDefault();
        }
        document.getElementById("city_map").onmousedown = function (e) {
            if (e.button == 2) {//右键
                goBackChinaMap();
            } else if (e.button == 0) {
                return;
            } else if (e.button == 1) {
                return;
            }
        }
        myChart.setOption(option);
    })
</script>
</html>
